/**
 * 个人设置
 */
import React, { Component } from 'react';
import { Tabs, Button, Row, Col, Form, Input, notification, Tooltip, Icon, message, Card, Radio } from 'antd';
import _ from 'lodash';
import { connect } from 'dva';
import shouldComponentUpdate from '../../components/decorator/shouldComponentUpdate';
import Password from './password';
import { updateInfo, reset } from '../../services/sysUser';
import { isSuccess } from '../../configs/error';
import WxForm from './wxForm';

const FormItem = Form.Item;
const TabPane = Tabs.TabPane;

const styles = {
	input: {
		marginBottom: '0'
	},
	h4: {
		display: 'inline',
		marginRight: '1em'
	}
};

const formItemLayout = {
	labelCol: {
		span: 8,
	},
	wrapperCol: {
		span: 14,
	},
};

const shareBenefitTypeTitles = {
	2: (
		<p>
			微信配置
			<span style={{ marginLeft: '20px', color: '#bbb', fontSize: '12px' }}>微信配置是为了绑定微信公众号，用于收款或分润</span>
		</p>
	),
	3: '收款配置',
	4: '缴款配置'
};

@shouldComponentUpdate
class Setting extends Component {
	constructor(props, context) {
		super(props, context);
		this.state = {
			resetBox: false,
			...this.getStateFormProps(props),
			error: {}
		};
	}

	componentWillReceiveProps(nextProps) {
		this.setState(this.getStateFormProps(nextProps));
	}

	onCancel = () => {
		const { onCancel, user } = this.props;
		this.setState({
			resetBox: false,
			nickname: user.nickName,
			error: {}
		});
		if (this.wx) this.wx.setFieldsValue(user.ext || {});
		onCancel();
	}

	onOk = async () => {
		// 提交信息
		const { dispatch, onCancel } = this.props;
		const { nickname, receiverOpenId, receiverWxName, error } = this.state;
		if (error.nickname) return;
		const wxData = this.wx ? this.wx.getFieldsValue() : {};
		const res = await updateInfo({
			nickName: nickname,
			ext: { ...wxData, receiverOpenId, receiverWxName }
		});
		if (isSuccess(res)) {
			message.success('修改成功');
			// onCancel();
			dispatch({
				type: 'app/query'
			});
		}
	}

	onResetOk = async data => {
		const { dispatch } = this.props;
		// 重置密码
		delete data.repeat;
		const res = await reset(data);
		if (isSuccess(res)) {
			notification.success({
				message: '重置密码成功',
				description: '重置密码成功，即将跳转登录页面，请重新登录',
				onClose: () => dispatch({ type: 'app/logout' })
			});
		}
	}

	getStateFormProps(props) {
		return {
			email: props.user.email,
			nickname: props.user.nickName,
			receiverOpenId: _.get(props, 'user.ext.receiverOpenId'),
			receiverWxName: _.get(props, 'user.ext.receiverWxName')
		};
	}

	reset = () => {
		this.setState({ resetBox: !this.state.resetBox });
	}

	change = e => {
		const { name, value } = e.target;
		const error = {};
		const v = value.replace(/(^\s*)|(\s*$)/g, '');
		if (name === 'nickname') {
			error[name] = /^[\u4e00-\u9fa5a-zA-Z0-9]{1,20}$/.test(v) ? null : '昵称最多输入20个字符,且不能包含特殊字符';
		}
		this.setState({
			[name]: v,
			error
		});
	}

	renderShareBenefitType(shareBenefitType) {
		const { user } = this.props;
		const { receiverOpenId, receiverWxName } = this.state;

		switch (shareBenefitType) {
			case 2:
				return <WxForm data={user.ext || {}} ref={d => this.wx = d} />;
			case 3:
				return (
					<Row style={styles.row}>
						<Col span={24} style={styles.title}>
							绑定收款账号
							<Tooltip title="绑定收款账号">
								<Icon type="question-circle-o" style={styles.icon} />
							</Tooltip>
						</Col>
						<Col span={12}><FormItem label="收款微信openid" hasFeedback {...formItemLayout}>
							<Input placeholder="请输入收款微信openid" name="receiverOpenId" onChange={this.change} value={receiverOpenId} />
						</FormItem></Col>
						<Col span={12}><FormItem label="收款微信实名" hasFeedback {...formItemLayout}>
							<Input placeholder="请输入收款微信实名" name="receiverWxName" onChange={this.change} value={receiverWxName} />
						</FormItem></Col>
					</Row>
				);
			case 4:
				return (
					<Row style={styles.row}>
						<Col span={24} style={styles.title}>
							绑定缴款账号
							<Tooltip title="绑定缴款账号">
								<Icon type="question-circle-o" style={styles.icon} />
							</Tooltip>
						</Col>
						<Col span={12}><FormItem label="缴款微信openid" hasFeedback {...formItemLayout}>
							<Input placeholder="请输入缴款微信openid" name="receiverOpenId" onChange={this.change} value={receiverOpenId} />
						</FormItem></Col>
						<Col span={12}><FormItem label="缴款微信实名" hasFeedback {...formItemLayout}>
							<Input placeholder="请输入缴款微信实名" name="receiverWxName" onChange={this.change} value={receiverWxName} />
						</FormItem></Col>
					</Row>
				);
			default:
				return null;
		}
	}

	render() {
		const { user } = this.props;
		const { nickname, resetBox, error } = this.state;
		const shareBenefitType = _.get(user, 'roles[0].shareBenefitType', 2);
		return (
			<div className="content-inner">
				<Tabs>
					<TabPane key="1" tab="账号信息">
						<Card
							noHovering
							title="账号信息"
							extra={<Button onClick={this.onOk} style={{ borderRadius: '4px' }} type="primary">保存</Button>}
						>
							<Row type="flex" align="middle" gutter={16}>
								<Col span={8} >
									<FormItem label="用户名：" hasFeedback >
										{user.username}
									</FormItem>
								</Col>
								<Col span={8} >
									<FormItem label="昵称" hasFeedback help={error.nickname} validateStatus={error.nickname ? 'error' : null}>
										<Input
											style={styles.input}
											name="nickname"
											value={nickname}
											onChange={this.change}
										/>
									</FormItem>
								</Col>
								<Col span={8} >
									<FormItem label="手机号" hasFeedback>
										{user.mobile}
									</FormItem>
								</Col>
							</Row>
							<Row>
								<Col span={8} >
									<FormItem label="登陆密码：" hasFeedback >
										<h4 style={styles.h4}>********</h4>
										<Button onClick={this.reset} size="small" icon="sync">重置</Button>
									</FormItem>
								</Col>
							</Row>
						</Card>
					</TabPane>
					{/* <TabPane key="2" tab="收款配置">
						<Card
							noHovering
							title={shareBenefitTypeTitles[shareBenefitType]}
							extra={<Button onClick={this.onOk} style={{ borderRadius: '4px' }} type="primary">保存</Button>}
						>
							{this.renderShareBenefitType(shareBenefitType)}
						</Card>
					</TabPane> */}
				</Tabs>
				<Password
					onOk={this.onResetOk}
					visible={resetBox}
					handleCancel={this.reset}
				/>
			</div>
		);
	}
}

Setting.propTypes = {

};

export default connect(
	({ app }) => ({ user: app.user })
)(Setting);
